<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-16 10:21:21
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-24 14:56:00
-->
<template>
  <el-dialog
    title="数据概览"
    :visible.sync="dialog.overviewShow"
    width="50%"
    @close="overviewClose"
    custom-class="overviewClass"
  >
    <div>优惠券名称:{{ drawerData.name }}</div>
    <div class="data">
      <div class="data-detail">
        <div>用券总金额</div>
        <div class="data-detailTwo">¥{{ statisticsObj.originalAmount }}</div>
      </div>
      <div class="data-detail">
        <div>优惠总金额</div>
        <div class="data-detailTwo">¥{{ statisticsObj.couponAmount }}</div>
      </div>
      <div class="data-detail">
        <div>发券用户数</div>
        <div class="data-detailTwo">
          {{ statisticsObj.grantNum }}
        </div>
      </div>
      <div class="data-detail">
        <div>用券用户数</div>
        <div class="data-detailTwo">
          {{ statisticsObj.useNum }}
        </div>
      </div>
    </div>
    <div class="specific">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="定向发放记录" name="first">
          <el-table :data="directionalData">
            <el-table-column label="优惠券名称" prop="couponName">
            </el-table-column>
            <el-table-column label="用户名称" prop="name"> </el-table-column>
            <el-table-column label="发放时间" prop="createTime">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="default"
                  @click="isEnable(scope.row)"
                >
                  {{ scope.row.enable ? "停用" : "启用" }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            prev-text="上一页"
            next-text="下一页"
            background
            :page-size="directionalQuery.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            @size-change="directionalChangeOne"
            @current-change="directionalChangeTwo"
            :current-page="directionalQuery.pageNum"
            layout=" ->,total,sizes, prev, pager, next, jumper "
            :total="directionalQuery.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="用券记录" name="fifth">
          <el-table :data="couponsData">
            <el-table-column label="优惠券名称" prop="couponName">
            </el-table-column>
            <el-table-column label="用户名称" prop="name"> </el-table-column>
            <el-table-column label="发放时间" prop="createTime">
            </el-table-column>
            <el-table-column label="使用时间" prop="useTime"> </el-table-column>
          </el-table>
          <el-pagination
            prev-text="上一页"
            next-text="下一页"
            background
            :page-size="couponsQuery.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            @size-change="couponsChangeOne"
            @current-change="couponsChangeTwo"
            :current-page="couponsQuery.pageNum"
            layout=" ->,total,sizes, prev, pager, next, jumper "
            :total="couponsQuery.total"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { statistics, record, disEnable } from "../../../../api/order/coupon";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      statisticsObj: {},
      activeName: "first",
      couponsData: [],
      couponsQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      directionalQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      directionalData: [],
    };
  },
  created() {
    this.getStatistics();
    this.getdirectional();
    this.getCoupons();
  },
  methods: {
    // 停用启用
    isEnable(row) {
      disEnable({
        id: row.id,
        enable: !row.enable,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getdirectional();
      });
    },
    // 获取发放记录
    getdirectional() {
      record({
        id: this.drawerData.id,
        pageNum: this.directionalQuery.pageNum,
        pageSize: this.directionalQuery.pageSize,
      }).then((res) => {
        this.directionalData = res.rows;
        this.directionalQuery.total = res.total;
      });
    },
    // 获取用券记录
    getCoupons() {
      record({
        id: this.drawerData.id,
        used: true,
        pageNum: this.couponsQuery.pageNum,
        pageSize: this.couponsQuery.pageSize,
      }).then((res) => {
        this.couponsData = res.rows;
        this.couponsQuery.total = res.total;
      });
    },

    // 获取统计数据
    getStatistics() {
      statistics({
        id: this.drawerData.id,
      }).then((res) => {
        this.statisticsObj = res;
      });
    },
    overviewClose() {
      this.dialog.overviewShowEject = false;
    },
    directionalChangeOne(val) {
      this.directionalQuery.pageSize = val;
      this.directionalQuery.pageNum = 1;
      this.getdirectional();
    },
    directionalChangeTwo(val) {
      this.directionalQuery.pageNum = val;
      this.getdirectional();
    },
    couponsChangeOne(val) {
      this.couponsQuery.pageSize = val;
      this.couponsQuery.pageNum = 1;
      this.getCoupons();
    },
    couponsChangeTwo(val) {
      this.couponsQuery.pageNum = val;
      this.getCoupons();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .overviewClass {
  .el-dialog__body {
    height: 720px;
    overflow: auto;
  }
}
.data {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  .data-detail {
    width: 150px;
    height: 100px;
    padding: 20px 20px 0;
    border: 1px solid #ececec;
    text-align: center;
    .data-detailTwo {
      margin-top: 10px;
      color: red;
    }
  }
}
.specific {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>